<template>
  <div>
    <el-card>
      <template #header>
        <div>点击波纹【v-wave】</div>
      </template>
      <button v-wave>Click here</button>
    </el-card>
    <el-card>
      <template #header>
        <div>拖拽【vue3-dnd】</div>
      </template>
      <DndProvider :backend="HTML5Backend">
        <Example></Example>
      </DndProvider>
    </el-card>
    <el-card>
      <template #header>
        <div>字体高亮【vue-word-highlighter】</div>
      </template>
      <WordHighlighter query="630">
        新疆乌什7.1级地震已致3人受伤 630名官兵连夜驰援灾区
      </WordHighlighter>
    </el-card>
    <el-card>
      <template #header>
        <div>签名【v-perfect-signature】</div>
      </template>
      <section class="flex">
        <main class="signature">
          <VPerfectSignature
            ref="signaturePad"
            backgroundColor="pink"
            :stroke-options="strokeOptions"
          />
        </main>
        <el-button class="signature-btn" @Click="toDataURL()">
          导出签名
        </el-button>
        <img class="signature-icon" :src="signatureIcon" alt="" />
      </section>
    </el-card>
  </div>
</template>

<script setup>
  import WordHighlighter from "vue-word-highlighter";
  import { DndProvider } from "vue3-dnd";
  import { HTML5Backend } from "react-dnd-html5-backend";
  import { VPerfectSignature } from "v-perfect-signature";
  import Example from "./components/Example.vue";

  /**
   * @var
   */
  const signaturePad = ref();
  const signatureIcon = ref();
  const strokeOptions = {
    size: 16,
    thinning: 0.75,
    smoothing: 0.5,
    streamline: 0.5,
  };

  function toDataURL() {
    const dataURL = signaturePad.value.toDataURL();
    signatureIcon.value = dataURL;
    console.log(dataURL);
  }
</script>

<style lang="scss" scoped>
  .signature {
    width: 300px;
    height: 300px;
    border: 1px solid #000;
  }
  .signature-icon {
    display: block;
    width: 300px;
    height: 300px;
  }
  .signature-btn {
    margin: 0 20px;
  }
</style>
